<template>
<div>
  <div class="canvas">
  </div>
  <div class="login-form">
    <a-form-model ref="ruleForm" :model="form" :rules="rules" >
      <div class="login-title">
        <span>欢迎进入GameLife的世界</span>
      </div>
      <a-form-model-item prop="username">
        <a-input v-model="form.username" placeholder="username">
          <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
        </a-input>
      </a-form-model-item>
      <a-form-model-item prop="password">
        <a-input v-model="form.password" type="password" placeholder="Password">
          <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
        </a-input>
      </a-form-model-item>
      <a-form-model-item prop="verifyCode">
        <a-input v-model="form.verifyCode" placeholder="Verification code">
          <a-icon slot="prefix" type="safety-certificate" style="color:rgba(0,0,0,.25)" />
          <span @click="handleRandomCode" class="verify-code" slot="addonAfter">{{randomCode}}</span>
        </a-input>
      </a-form-model-item>
      <a-form-model-item>
        <a-button style="width: 100%;" type="primary" @click="handleSubmit">
          登录
        </a-button>
      </a-form-model-item>
      <a-form-model-item>
        <div style="text-align: center;">
          <a-icon type="dingding" class="login-icon" @click="handleOtherLogin('dingding')" />
          <a-icon type="wechat" class="login-icon" @click="handleOtherLogin('wechat')" />
          <a-icon type="qq" class="login-icon" @click="handleOtherLogin('qq')" />
          <a-icon type="github" class="login-icon" @click="handleOtherLogin('github')" />
        </div>
      </a-form-model-item>
    </a-form-model>
  </div>
</div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    let validateUser = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'));
      } else {
        if (this.form.username !== '') {
          this.$refs.ruleForm.validateField('username');
        }
        callback();
      }
    };
    let validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.form.password !== '') {
          this.$refs.ruleForm.validateField('password');
        }
        callback();
      }
    };
    let validateCode = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入验证码'));
      } else {
        if (this.form.password !== '') {
          this.$refs.ruleForm.validateField('verifyCode');
        }
        callback();
      }
    };
    return {
      randomCode: null,
      form: {
        username: '',
        password: '',
        verifyCode: '',
      },
      rules: {
        username: [{ validator: validateUser, trigger: 'change' }],
        password: [{ validator: validatePass, trigger: 'change' }],
        verifyCode: [{ validator: validateCode, trigger: 'change' }],
      },
    };
  },
  mounted() {
    this.handleRandomCode();
  },
  methods: {
    handleRandomCode(){
      this.randomCode = Math.round(Math.random()*100000+899999);
    },
    handleSubmit() {
      this.$router.replace({ path:'/base/Base' })

      // this.$refs.ruleForm.validate(valid => {
      //   if (valid) {
      //     this.$router.replace({ path:'/base/Base' })
      //   } else {
      //     console.log('error submit!!');
      //     return false;
      //   }
      // });
        // this.$router.replace({ path:'/base/Base' })
      // if (this.form.username == 'admin'&&this.form.password == '123456') {
      //   this.$router.push({ path:'/base/Base' })
      // }
      
      // let person = {username:this.form.username,password:this.form.password};
      // let persons = [];
      // persons = JSON.parse(localStorage.getItem('persons'))||[];
      // if (this.form.username&&this.form.password) {
      //   persons.push(person)
      // }
      // localStorage.setItem('persons',JSON.stringify(persons));
    },
    handleOtherLogin(key){
      this.$message.success('使用'+key+'登录成功');
    },
  },
}
</script>

<style lang="less" scoped>
  .canvas {
    /* 导入图片 */
    background-image: url('../../public/login.png');
    /* 这三句是让整个div固定在屏幕的最上方和最左方 */
    position:fixed;
    top: 0;
    left: 0;
    /* 下面前两句是让整个div跟屏幕实现一模一样的大小，从而达到全屏效果，
    而min-width是为了实现让屏幕宽度在1000px以内时，div的大小保持不变，
    也就是说在这种情况下，缩放屏幕宽度时，图片不要缩放（只有在1000px以内才有效）。 */
    width:100%;
    height:100%;
    min-width: 1000px;
    /* 这个的目的是让整个div在HTML页面中各个层级的下方，
    正常情况下，第一个创建的层级z-index的值是0，所以如果我们这里写成-1也可以实现，
    不过这里写-10是确保整个div在最下面，因为如果页面中层级太多了，有的时候用-1不一定在最下面，
    但如果写成-100这样大数字的也没有什么意义。
    用index:-10 以此能达到看上去像背景图片，其实是一个最普通的div，只是层级关系变了，才让人看上去看是背景图片。 */
    z-index:-10;
    zoom: 1;
    background-color: #fff;
    /* 下面这个是背景不要重复 */
    background-repeat: no-repeat;
    /* 下面三句是一个意思，就是让图片随屏幕大小同步缩放，但是有部分可能会被裁切，不过不至于会露白，
    下面两句是为chrome和opera浏览器作兼容。 */
    background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    /* 下面这句的意思就是图片的位置，居中。 */
    background-position: center center;
  }
  .login-form {
    position:fixed;
    top: calc(50% - 160px);
    right: 20%;
    width: 300px;
    height: 380px;
    background-color: #fff;
    border-radius: 5px;
    padding: 30px;
  }
  /deep/.ant-form-item {
    margin-bottom: 10px;
  }
  .login-title {
    text-align: center;
    color: #1f7efe;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
  }
  .login-icon {
    margin: 0 10px;
    color: #1f7efe;
    font-size: 20px;
  }
  .verify-code {
    color: #fff;
    cursor:pointer;
    background-image: linear-gradient(
      to right,
      orangered,
      orange,
      gold,
      lightgreen,
      cyan,
      dodgerblue,
      mediumpurple,
      hotpink,
      orangered
    );
  }
  /deep/.ant-input-group-addon {
    padding: 0 3px;
  }
</style>
